<template>
  <div class="app-bg">

<div>
  <YihenPixelBadge
  :types="['warning','success']"
  :texts="['title','content']"
  :isSplited = "true"
  width="250px"
></YihenPixelBadge>
<br>
  <YihenPixelBadge
  :types="['dark','error']"
  :texts="['title','content']"
  :isSplited = "true"
  width="250px"
></YihenPixelBadge>
<br>
  <YihenPixelBadge
  :types="['primary']"
  :texts="['title']"
  width="250px"
></YihenPixelBadge>
<br>
<br>
  <YihenPixelBadge
  :types="['primary','success']"
  :texts="['100%','prog']"
  :isIcon="true"
  width="250px"
></YihenPixelBadge>

</div>


  </div>
</template>

<script setup>
// 组件引入
import YihenGlassmorphismCard from "./components/card/Yihen-GlassmorphismCard.vue";
import YihenPixelButton from "./components/button/Yihen-PixelButton.vue";
import YihenPixelText from "./components/texts/Yihen-PixelText.vue";
import YihenPixelBalloon from "./components/balloon/Yihen-PixelBalloon.vue";
import YihenPixelRadio from "./components/radios/Yihen-PixelRadio.vue";
import YihenPixelCheckboxes from "./components/checkboxes/Yihen-PixelCheckboxes.vue";
import YihenPixelInput from "./components/inputs/Yihen-PixelInput.vue";
import YihenPixelContainer from "./components/container/Yihen-PixelContainer.vue";
import YihenImageSlider from "./components/ImageSlider/Yihen-ImageSlider.vue";
import YihenSimpleCollapse from "./components/collapse/Yihen-SimpleCollapse.vue";
import YihenPixelProgress from "./components/progress/Yihen-PixelProgress.vue";
import YihenPixelBadge from  "./components/badges/Yihen-PixelBadge.vue";
import { ref } from "vue";
let radioValue = ref("");
let radioValue2 = ref("");
let checkboxValue = ref("");

const accordionData = [
  {
    title: "BRANDING",
    // tags: ['#Figma', '#Sketch'],
    list: ["A", "B", "C"],
    content: "默认内容1",
  },
  {
    title: "UI DESIGN",
    tags: ["#XD"],
    content: "默认内容2",
  },
];
</script>

<style scoped>
.app-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #888 center/cover no-repeat;
  /* url('./src/imgs/background.jpg') */
}

section {
  margin: 10px 10px;
}
</style>